// 设置滚动条
@mixin scrollbar(
	$thumb-color: #ccc,
	$thumb-hover-color: #a9a9a9,
	$thumb-focus-color: var(--theme-color),
	$bar-width: 3px,
	$bar-height: 3px,
	$bar-color: transparent,
	$bar-hover-color: #999999
) {
	color: $thumb-color;

	&::-webkit-scrollbar {
		width: $bar-width;
		height: $bar-height;
		color: $bar-color;
		box-shadow: inset 0 0 0 3px;
		transition: color 0.5s ease;

		&:hover {
			color: $bar-hover-color;
		}
	}

	&::-webkit-scrollbar-thumb {
		width: 0;
		box-shadow: inset 0 0 0 3px;
		border-radius: 4px;

		&:active {
			color: $thumb-focus-color;
		}
	}

	&:hover {
		color: $thumb-hover-color;
	}
}

// 初始化样式
@mixin cq-init-style-ul {
	margin: 0;
	padding: 0;
}

@mixin cq-init-style-li {
	list-style: none;
	line-height: 1;
}

// 简单的移入/点击效果
@mixin simple-hover-style {
	position: relative;

	&::before {
		content: ' ';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background-color: #777;
		border: inherit;
		border-color: #777;
		transform: translate(-50%, -50%);
		transition: opacity 0.2s ease-in-out;
		opacity: 0;
	}

	&:hover,
	&:active {
		&::before {
			opacity: 0.1;
		}
	}
}
// 禁用移入/点击效果
@mixin remove-simple-hover-style {
	&::before {
		display: none;
	}
}
